<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城站-运营现状组件测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .component-demo {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #333;
            border-radius: 8px;
        }
        h1, h2 {
            color: #00FFFF;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>城站-运营现状组件测试页面</h1>
        
        <div class="component-demo">
            <h2>组件说明</h2>
            <p>这是一个基于OperationStatus组件的新组件，主要变化：</p>
            <ul>
                <li>组件名称：城站-运营现状 (CityStationOperationStatus)</li>
                <li>将原来的TrafficMonitor组件替换为bar-chart组件</li>
                <li>保持了原有的统计数据展示功能</li>
                <li>新增了24小时人流统计的柱状图</li>
            </ul>
        </div>

        <div class="component-demo">
            <h2>组件特性</h2>
            <ul>
                <li>✅ 响应式设计支持</li>
                <li>✅ 深色主题</li>
                <li>✅ 统计数据展示（进站、出站、剩余人数）</li>
                <li>✅ 柱状图展示（24小时人流统计）</li>
                <li>✅ 可配置的状态栏</li>
                <li>✅ 支持设计模式</li>
            </ul>
        </div>

        <div class="component-demo">
            <h2>使用方法</h2>
            <pre><code>
import CityStationOperationStatus from './components/city-station-operation-status';

&lt;CityStationOperationStatus
  width={500}
  height={405}
  noResponsiveScale={true}
  statusBar={{
    chineseText: "运营现状",
    englishText: "Operation Status",
    theme: "dark"
  }}
/&gt;
            </code></pre>
        </div>
    </div>
</body>
</html>
